<template>
    <div id="categories">
        <el-container class="tl-overflow-hidden">
            <el-header class="cate-header tl-overflow-hidden tl-width-100-percent tl-text-center">
                <h1 class="sb-title tl-font-60-px tl-text-shadow-mini tl-color-white tl-margin-top-80">
                    分类
                </h1>
                <span class="tl-display-inline-block tl-font-18-px tl-text-shadow-mini tl-margin-top-30" id="cate"></span>
            </el-header>
            <el-main class="tl-padding-20 tl-margin-top--75">
                <div class="tl-width-80-percent tl-margin-auto">
                    <div class="tl-padding-0-15">
                        <el-card class="tl-border-radius-8">
                            <div class="tl-margin-auto tl-v-center" slot="header">
                                <i class="iconfont icon-bookmark tl-font-24-px"></i>
                                <span class="tl-margin-left-5 tl-font-24-px tl-font-weight-700">文章分类</span>
                            </div>
                            <div class="tl-width-80-percent tl-margin-auto tl-text-center">
                                <a class="tl-a" v-for="(cate, index) in cate" :key="index" :href="'/web/categories/' + cate.name">
                                    <el-tag :class="{ 'active-tag': active === cate.name }" class="tl-margin-10 tl-color-block-6 tl-font-14-px" type="info">
                                        <span v-text="cate.name"/>&nbsp;<span style="color: #e91e63" class="tl-font-10-px" v-text="cate.value"/>
                                    </el-tag>
                                </a>
                            </div>
                        </el-card>
                    </div>
                    <slot class="tl-min-height-100"></slot>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>

import { list } from '@/api/category/category';

export default {
    name: 'Categories',
    components: {},
    props: ['active'],
    data: function () {
        return {
            cate: []
        }
    },
    methods: {
        async getTypeList () {
            const res = await list();
            if (res.code === 200) {
                this.cate = res.data.rows;
            }
        }
    },
    created () {
        this.getTypeList()
    },
    mounted () {
        this.auto(["Welcome to ityanger's personal blog.", '欢迎来到ityanger的个人网站.'], document.getElementById('cate'));
    }
}
</script>

<style lang='less' scoped>
.active-tag {
    text-shadow: 0 0 1px #cf1322;
    color: #cf1322 !important;
    background-color: rgb(255, 204, 199);
}

.el-card {
    ::v-deep .el-card__header {
        display: flex;
        margin: auto;
    }

    .el-tag {
        box-shadow: 0 0 5px rgba(0, 225, 225, 0.3) !important;
    }

    a:hover {
        .el-tag {
            text-shadow: 0 0 1px #cf1322;
            color: #cf1322 !important;
            background-color: rgb(255, 235, 235);
        }
    }
}

.cate-header {
    height: 300px !important;
    background: url("https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp") center center / cover no-repeat rgb(34, 34, 34);
}

.sb-title {
    margin: 120px 0 5px 0;
    letter-spacing: 2px;
    font-weight: 700;
    -webkit-animation: fade-in-down 1s;
    animation: fade-in-down 1s both;
    -webkit-animation-delay: .6s;
    animation-delay: .5s;
}

@keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

#cate {
    color: #eee;
    border-right: 2px solid #eee;
    animation: caret 0.5s step-end infinite;
}
</style>
